<!--
 * @Author: your name
 * @Date: 2020-07-27 12:28:27
 * @LastEditTime: 2020-08-21 14:13:39
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ryfront\src\components\Header.vue
--> 
<template>
    <div class="ry-header" style="width:100%;height:100%;">
        <span class="title">系统后端</span>
        
        <span class="title-set4" style="cursor:pointer" @click="logout" >退出登录</span>
        <span class="title-set3"></span>
        <span class="title-set2">{{nowDate}} </span>
        <span class="title-set1">当前用户: {{nowUser}}</span>

    </div>

</template>

<script>
const moment = require("moment");
export default {
    name: 'header',
    data() {
        return {
            nowDate:moment().format("YYYY-MM-DD")+" " + moment().format("dddd"),
            nowUser:"admin",
        }
    },
    methods: {
        //退出登录
        logout(){
            //删除token值，并且退出到
            localStorage.removeItem("token");
            localStorage.removeItem("nowUser");
            this.$router.push("/login");
        }
    },
    mounted(){
        //展示当前账户 
        this.nowUser = localStorage.getItem("nowUser");
        
    }
}
</script>

<style scoped>
    .ry-header {
        background-color: #004986;
        
    }

    .title {
        font-size: 24px;
        color: #ffffff;
        padding: 0.75% 1%;    
        float: left;
    }

    .title-set1 {
        font-size: 16px;
        color: #ffffff;
        float:right;
        padding: 1% 2%;
    }

    .title-set2 {
        font-size: 16px;
        color: #ffffff;
        float:right;
        padding: 1% 1px;
    }

    .title-set3 {
        font-size: 16px;
        color: #ffffff;
        float:right;
        padding: 1% 1%;
    }

    .title-set4 {
        font-size: 16px;
        color: #ffffff;
        float:right;
        padding: 1% 1%;
    }
</style>